<template>
    <div :class="['side',visible?'show':'']">
        <div class="side_title">
            <div class="side_title_l">{{dialogStatus}}</div>
            <div class="side_title_r">

            </div>
        </div>
        <div class="side_content">
            <div class="title_mix">欠费账单</div>
            <div class="side_t">
                <el-table :key="tableKey" v-loading="listLoading" row-key="menuId" height="100%" :data="list" border fit
                    highlight-current-row style="width: 100%;">

                    <el-table-column prop="houseName" header-align="center" align="center" label="房屋名称" width="180">
                        <template
                            slot-scope="scope">{{scope.row.buildingName}}-{{scope.row.unitName}}-{{scope.row.floorName}}-{{scope.row.houseName}}</template>
                    </el-table-column>
                    <el-table-column prop="itemsName" header-align="center" align="center" label="收费项目">
                    </el-table-column>
                    <el-table-column prop="customerName" header-align="center" align="center" label="客户名称">
                    </el-table-column>
                    <el-table-column prop="billBeginTime" header-align="center" align="center" label="账单开始日期">
                    </el-table-column>
                    <el-table-column prop="billEndTime" header-align="center" align="center" label="账单结束日期">
                    </el-table-column>

                    <el-table-column prop="billAllMoney" header-align="center" align="center" label="应收金额(元)">
                        <template slot-scope="scope">{{ scope.row.billAllMoney  }}</template>
                    </el-table-column>

                    <el-table-column prop="billFreeMoney" header-align="center" align="center" label="减免金额(元)">
                        <template slot-scope="scope">{{ scope.row.billFreeMoney }}</template>
                    </el-table-column>

                    <el-table-column prop="billRealMoney" header-align="center" align="center" label="实际应收金额(元)">
                        <template slot-scope="scope">{{ scope.row.billRealMoney }}</template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div class="fenye">
                <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getCustomerList" />
            </div> -->
            <div class="side_c">
                <div class="side_c_1">
                    <div class="side_c_1_key"><span style="margin-right:30px">应收总额:</span><span
                            class="number">{{settlement.billAllMoney}}</span><span>元</span>
                    </div>
                    <div class="side_c_1_key"><span>减免总额:</span><span class="number">{{settlement.billFreeMoney}}</span><span>元</span></div>
                    <div class="side_c_1_key">
                        <div><span>预存冲抵</span><span class="number">{{settlement.billPrepaidMoney}}</span><span>元</span></div>
                    </div>
                </div>
                <div class="side_c_2">
                    <div class="side_c_2_key"><span>实际应收总额:</span><span class="number">{{settlement.billRealMoney}}</span><span>元</span>
                    </div>
                    <div class="side_c_2_key">
                        <div>
                            <el-checkbox v-model="temp.type">预存冲抵</el-checkbox>
                        </div>
                    </div>

                </div>
            </div>
            <div class="title_mix">立即收款</div>
            <div class="side_b">

                <el-form ref="temp" :inline="true" :model="temp" label-width="80px">
                    <el-row :gutter="20" v-for="(item,index) in temp.financeBillPaiedPayEntityList" :key="index">
                        <el-col :span="10" :offset="0">
                            <el-form-item label="结算账户" prop="house_state" style="width:100%">
                                <el-select v-model="item.settlementId" placeholder="请选择">
                                    <el-option v-for="item in settlements_options" :key="item.id" :label="item.settlementName"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="金额" prop="area" style="width:100%">
                                <el-input v-model="temp.financeBillPaiedPayEntityList[index].money" type="number" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <div class="add_sett">
                                <svg-icon class-name="delete_seet" icon-class="minus-circle" @click="add_settlements(index)"
                                    v-show="temp.financeBillPaiedPayEntityList.length > 1" />
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <svg-icon class-name="add_seet" icon-class="plus-circle" @click="add_settlements()"
                                    v-show="temp.financeBillPaiedPayEntityList.length-1 == index" />
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="本次实收" style="width:100%">
                                <el-input :value="all" disabled type="number" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="收款时间" style="width:100%">
                                <el-date-picker v-model="temp.payTime" value-format="yy-MM-dd" type="date" placeholder="选择日期">
                                </el-date-picker>
                                <!-- <el-input v-model="temp.payTime" type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入" /> -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="是否发票" style="width:100%">
                                <el-select v-model="temp.openTicketFlag" placeholder="请选择">
                                    <el-option v-for="item in openTicketFlagType_option" :key="item.value" :label="item.lable"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="收款备注" style="width:100%">
                                <el-input v-model="temp.remarks" type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </div>

            <div class="button_s">
                <el-button type="primary" @click="dataFormSubmit">
                    确认
                </el-button>
                <el-button @click="visible = false">
                    取消
                </el-button>
            </div>

        </div>
        <div :class="['side_zz',visible?'show':'']"></div>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination 分页组件
import { getCustomerList } from '@/api/assets'// 请求数据
import { getBillDetailed, getFinancesettlement, saveBillDetailed } from '@/api/charge'// 请求数据

import { customerType, customerState, openTicketFlagType } from '@/utils/enum'
import { toDate, formatDate } from '@/utils'
export default {
    components: { Pagination },
    filters: {
        toData (data) {
            return toDate(data)
        },
        // customerTypeFilter (e) {
        //     let map = customerType;
        //     return map[e]
        // },
    },
    computed: {
        // customer_type_option () {
        //     let arr = [{ lable: '全部', value: '' }]
        //     for (let key in customerType) {
        //         arr.push({
        //             lable: customerType[key],
        //             value: key
        //         })
        //     }
        //     return arr
        // },
        openTicketFlagType_option () {
            let arr = []
            for (let key in openTicketFlagType) {
                arr.push({
                    lable: openTicketFlagType[key],
                    value: key
                })
            }
            return arr
        },
        all () {
            if (this.temp.financeBillPaiedPayEntityList.length < 1) return "0";
            let numberS = this.temp.financeBillPaiedPayEntityList.map(item => {
                return item.money ? item.money * 1 : 0
            })
            let number = eval(numberS.join("+")).toString()
            return number
        }
    },
    watch: {
        'temp.type': function (nobj, obj) {
            this.handleFilter()
        }
    },
    data () {
        return {
            temp: {
                type: false,
                financeBillPaiedPayEntityList: [{
                    settlementId: '',
                    money: ""
                }],
                openTicketFlag: "2", //是否发票
                payTime: formatDate("-"),//收款时间
                remarks: '',//备注
            },
            modle_bill: {
                settlementId: '',
                money: ""
            },
            dialogStatus: '收款台',
            visible: false,
            tableKey: 0,
            list: [], // 表格数据
            settlement: {
                billAllMoney: 0,
                billFreeMoney: 0,
                billPrepaidMoney: 0,
                billRealMoney: 0
            },//结算数据
            total: 0, // 总条数
            listLoading: false, // 表格加载数据时的 loading
            listQuery: { // 表格当前页 和 当前页的展示数量
                page: 1,
                limit: 20
            },
            idS: [],//结算账单 id
            settlements_options: [],//结算方式list

        }
    },
    created () {
        // this.getList()
    },
    methods: {
        // 初始化
        init (status, param) {
            console.log(param)
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this.idS = param.idS
            this.getList()
        },
        getList () {
            this.getCustomerList()
            this.get_settlements_options()
        },
        handleFilter () {
            this.listQuery.page = 1
            this.getCustomerList()
        },
        //获取账单明细
        async getCustomerList () {
            this.listLoading = true
            const params = Object.assign({
                ids: this.idS,
                type: this.temp.type ? "1" : "2"
            }, {})
            const res = await getBillDetailed(params).catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            // console.log(">>>>>", data)
            this.list = data.financeBillPaiedDetailEntityVoList
            // this.total = data.totalCount
            this.listLoading = false
        },
        //获取结算方式
        async get_settlements_options () {
            const res = await getFinancesettlement().catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            this.settlements_options = data
            console.log("--->>>", data)
        },
        // 表单提交
        async dataFormSubmit (row) {
            // let visible = await this.$confirm(`确定对${row.customerName}进行[绑定]操作?`, '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // })

            let params = {
                "ids": this.idS,
                "type": this.temp.type ? "1" : "2",
                "financeBillPaiedPayEntityList": this.temp.financeBillPaiedPayEntityList,
                "openTicketFlag": this.temp.openTicketFlag,
                "payTime": this.temp.payTime,
                "remarks": this.temp.remarks,
            }

            const res = await saveBillDetailed(params)

            // 成功
            let this_ = this
            this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                    console.log("----")
                    this_.visible = false
                    this_.$emit('getList')
                }
            })
        },
        //增加账户
        add_settlements (e) {
            // console.log(e, this.temp.financeBillPaiedPayEntityList.length)
            if (e + 1 && this.temp.financeBillPaiedPayEntityList.length > 1) {
                this.temp.financeBillPaiedPayEntityList.splice(e, 1)
                return
            }
            this.temp.financeBillPaiedPayEntityList.push(Object.assign({}, this.modle_bill))
        }

    }
}
</script>

<style lang="scss" scoped>
// @import '~@/styles/variables.scss';
@import '~@/styles/variables.scss';
.side_zz {
    position: fixed;
    width: 0;
    height: 100%;
    z-index: -10;
    top: 0;
    bottom: 0;
    right: 800px;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.1s linear;
    opacity: 0;
}
.side_zz.show {
    width: calc(100% - 800px);
    opacity: 1;
}
.side {
    position: fixed;
    right: -900px;
    top: 0;
    z-index: 10;
    width: 800px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s linear;
    padding: 10px;
    box-sizing: border-box;
}
.side.show {
    right: 0;
}
.side_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    font-weight: 600;
}
.side_content {
    width: 100%;
    height: calc(100% - 40px);
    padding: 10px 0;
    box-sizing: border-box;
}
.title_mix {
    width: 100%;
    height: 30px;
    line-height: 30px;
}
.side_t {
    width: 100%;
    height: calc(50% - 100px);
}
.side_c {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-items: center;
    padding-top: 40px;
    box-sizing: border-box;
    background: #f5f5f5;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    box-sizing: border-box;

    .side_c_1 {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        flex-flow: row;
        align-items: center;

        .side_c_1_key .number {
            font-size: 20px;
            color: $pink;
            font-weight: 600;
            margin: 0 4px;
        }
    }

    .side_c_2 {
        width: 100%;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        flex-flow: row;
        align-items: center;

        .side_c_2_key .number {
            font-size: 24px;
            color: $pink;
            font-weight: 600;
            margin: 0 4px;
        }
    }
}
.side_c_l {
    flex: 0 0 120px;
    height: 30px;
    line-height: 30px;
}
.side_c_r {
    flex: 1;
    height: 30px;
    text-align: right;
}
.side_b {
    width: 100%;
    height: calc(50% - 150px);

    ::v-deep .el-form-item__content {
        width: calc(100% - 80px);
    }
}
.side_title {
    display: flex;
    justify-content: center;
    flex-flow: row;
}
.side_title_l {
    flex: 0 0 160px;
}
.side_title_r {
    flex: 1;
    text-align: right;
}
.add_seet {
    color: $panGreen;
}
.delete_seet {
    color: $red;
}
.add_sett {
    line-height: 28px;
}
.button_s {
    text-align: right;
}
</style>